import { PropType } from 'vue';
import { TDescLegend, TPieSize } from '../types';
import './index.scss';

const PRIMARY_VALUE_LABEL_MAP = {
  QUANTITY: '数量',
  AMOUNT: '金额(亿元)'
};
export type TDescLegendPrimaryValueType = keyof typeof PRIMARY_VALUE_LABEL_MAP;
export default defineComponent({
  props: {
    legendData: {
      type: Array as PropType<TDescLegend[]>,
      default: () => []
    },
    size: {
      type: String as PropType<TPieSize>,
      default: 'default'
    },
    primaryValueType: {
      type: String as PropType<TDescLegendPrimaryValueType>,
      default: 'QUANTITY'
    }
  },
  setup(props) {
    const { legendData } = toRefs(props);
    return () => (
      <ul class={['pie-chart-desc-legend flex-1 clr-text-5', `pie-chart-desc-legend--${props.size} `]}>
        <li class="flex justify-between mb-4px text-right">
          <span class="w-1/3"></span>
          <span class="text-12 clr-text-4  w-100px">{PRIMARY_VALUE_LABEL_MAP[props.primaryValueType]}</span>
          <span class="text-12 clr-text-4  w-100px">占比</span>
        </li>
        {legendData.value.map((item, index) => {
          return (
            <li
              class={[
                'flex justify-between bg-fill-2 rounded-4px px-8 py-4',
                index !== legendData.value.length - 1 && 'mb-8'
              ]}
              key={item.label}>
              <span class="flex items-center w-4/10">
                <i class="rect" style={{ backgroundColor: item.color }} />
                <i class="name" style={{ color: item.color }}>
                  {item.label}
                </i>
              </span>
              {item.values.map((value) => {
                return <span class="value min-w-68px text-right">{value}</span>;
              })}
            </li>
          );
        })}
      </ul>
    );
  }
});
